<template>
    <div ref="contentDiv" class="p-10" style="height: 650px; padding-top: 0px; margin-left: 200px; margin-top: 50px;">
      <div class="flex justify-between items-center mb-8">
        <h2 class="text-2xl font-bold text-slate-800">数据概览</h2>
      </div>
      <!-- 数据概览卡片 -->
      <div class="grid grid-cols-4 gap-6 mb-10">
        <div
          v-for="(card, index) in statusCards"
          :key="index"
          class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow duration-200"
        >
          <div class="flex items-center">
            <div :class="`w-12 h-12 rounded-lg flex items-center justify-center ${card.bgColor}`">
              <i :class="`${card.icon} text-xl ${card.iconColor}`"></i>
            </div>
            <div class="ml-4">
              <div class="text-sm text-gray-600">{{ card.title }}</div>
              <div class="text-2xl font-semibold mt-1">{{ card.value }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 图表区域 -->
      <div class="grid grid-cols-2 gap-8">
        <!-- 折线图 -->
        <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow duration-200">
          <h3 class="text-lg font-semibold mb-6 text-slate-800">数据趋势分析</h3>
          <div ref="lineChart" class="w-full h-80"></div>
        </div>
        <!-- 饼图 -->
        <div class="bg-white p-8 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow duration-200">
          <h3 class="text-lg font-semibold mb-6 text-slate-800">数据分布占比</h3>
          <div ref="pieChart" class="w-full h-80"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, onUnmounted } from 'vue';
  import * as echarts from 'echarts';
  import axios from 'axios';
  import { getToken } from '@/utils/auth';
  
  // DOM 引用
  const contentDiv = ref(null);
  const lineChart = ref(null);
  const pieChart = ref(null);
  
  // 数据卡片
  const statusCards = reactive([
    {
      title: '申核总量',
      value: '0',
      icon: 'iconfont icon-sousuo',
      bgColor: 'bg-yellow-50',
      iconColor: 'text-yellow-500',
    },
    {
      title: '已申核量',
      value: '0',
      icon: 'iconfont icon-gou1',
      bgColor: 'bg-green-50',
      iconColor: 'text-green-500',
    },
    {
      title: '未通过量',
      value: '0',
      icon: 'iconfont icon-chacha',
      bgColor: 'bg-blue-50',
      iconColor: 'text-blue-500',
    },
    {
      title: '待申核量',
      value: '0',
      icon: 'iconfont icon-lishijilu',
      bgColor: 'bg-red-50',
      iconColor: 'text-red-500',
    },
  ]);
  
  // 初始化
  onMounted(() => {
    fetchData(); // 获取数据
    setContentWidth(); // 设置内容宽度
    window.addEventListener('resize', setContentWidth); // 监听窗口大小变化
  });
  
  // 组件卸载时移除事件监听
  onUnmounted(() => {
    window.removeEventListener('resize', setContentWidth);
  });
  
  // 获取数据
  const fetchData = async () => {
    try {
      const token = getToken();
      const response = await axios.get('http://localhost:8081/teacherWorkbench/get', {
        headers: {
          token: `${token}`, // 添加 token 到请求头
        },
      });
      const data = response.data.data;
  
      // 更新卡片数据
      statusCards[0].value = data.sum; // 申核总量
      statusCards[1].value = data.ok; // 已申核量
      statusCards[2].value = data.no; // 未通过量
      statusCards[3].value = data.wait; // 待申核量
  
      // 初始化图表
      initCharts(data);
    } catch (error) {
      console.error('请求数据失败:', error);
    }
  };
  
  // 初始化图表
  const initCharts = (data) => {
    if (lineChart.value && pieChart.value) {
      const lineChartInstance = echarts.init(lineChart.value);
      const pieChartInstance = echarts.init(pieChart.value);
  
      // 折线图配置
      const lineOption = getLineChartOption(data);
      lineChartInstance.setOption(lineOption);
  
      // 饼图配置
      const pieOption = getPieChartOption(data);
      pieChartInstance.setOption(pieOption);
  
      // 监听窗口大小变化，重新调整图表大小
      window.addEventListener('resize', () => {
        lineChartInstance.resize();
        pieChartInstance.resize();
      });
    }
  };
  
  // 获取折线图配置
  const getLineChartOption = (data) => ({
    animation: false,
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['数量'],
      top: 10,
      right: 10,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['申核总量', '已申核量', '未通过量', '待申核量'], // 横坐标分类
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: '#E5E7EB',
        },
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '数量',
        type: 'line',
        data: [data.sum, data.ok, data.no, data.wait], // 使用后端返回的值
        smooth: true,
        lineStyle: {
          color: '#6366F1',
        },
        itemStyle: {
          color: '#6366F1',
        },
      },
    ],
  });
  
  // 获取饼图配置
  const getPieChartOption = (data) => ({
    animation: false,
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderColor: '#E2E8F0',
      textStyle: {
        color: '#1E293B',
      },
      borderWidth: 1,
    },
    legend: {
      orient: 'vertical',
      right: '10%',
      top: 'center',
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        data: [
          { value: data.ok, name: '已申核', itemStyle: { color: '#6366F1' } },
          { value: data.wait, name: '待审核', itemStyle: { color: '#22C55E' } },
          { value: data.no, name: '未通过', itemStyle: { color: '#EF4444' } },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  });
  
  // 设置内容宽度
  const setContentWidth = () => {
    if (contentDiv.value) {
      const windowWidth = window.innerWidth;
      contentDiv.value.style.width = `${windowWidth * 0.75}px`;
      contentDiv.value.style.marginLeft = `${windowWidth * 0.175}px`;
    }
  };
  </script>
  
  <style scoped>
  .chart-container {
    width: 100%;
    height: 100%;
  }
  </style>